<template>
  <t-modal
    title="查看/下载"
    width="900px"
    :visible="visible"
    @cancel="closeModal()"
    wrapClassName="file-preview-container"
    forceRender
    v-bind="footer"
  >
    <div class="curve-modal-body">
      <div class="sub-title">{{ subtitle }}：</div>
      <div class="files-warp">
        <a-empty v-if="fileList.length == 0" />
        <template v-else>
          <div class="file-list">
            <div
              class="file-item"
              v-for="(item, index) in fileList"
              :key="index"
            >
              <div class="file-icon" :class="[filterIcon(item)]"></div>
              <div class="file-content">
                <div class="file-name">
                  <a-tooltip>
                    <template slot="title">
                      {{ item[replaceFields.fileName] }}
                    </template>
                    {{ item[replaceFields.fileName] }}
                  </a-tooltip>
                </div>
                <div class="file-size" v-if="item[replaceFields.fileSize]">
                  {{ item[replaceFields.fileSize] }}
                </div>
              </div>
              <div class="file-operate">
                <div
                  class="file-button preview-button"
                  @click="viewFile(item)"
                ></div>
                <div
                  class="file-button download-button"
                  @click="downloadFile(item)"
                >
                  <a-icon
                    type="download"
                    :style="{
                      fontSize: '16px',
                      color: '#FF3F4A',
                    }"
                  />
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <!-- 附件预览弹窗 -->
    <previewModal
      ref="previewModal"
      :visible.sync="previewModal.visible"
      :loading="previewModal.loading"
    ></previewModal>
  </t-modal>
</template>

<script>
import { mapGetters } from "vuex";
import { getToken, downloadDfs } from "@/utils/TopVUI";
//预览
import previewModal from "@/pages/document/minio/previewModal";
export default {
  components: {
    previewModal,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    fileList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    replaceFields: {
      type: Object,
      default: () => {
        return {
          fileName: "fileName",
          fileSize: "fileSize",
        };
      },
    },
    subtitle: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      footer: {
        footer: null,
      },
      //预览
      previewModal: {
        visible: false,
        loading: false,
      },
    };
  },
  computed: {
    ...mapGetters(["configData", "userInfo"]),
    kkFileView() {
      let index = this.configData.findIndex(
        (item) => item.code === "kkFileView"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "http://192.168.1.216:8012/onlinePreview";
      }
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
        }
      },
      immediate: true,
    },
  },
  methods: {
    //预览
    viewFile(file) {
      let { previewWay, fileName, url, uuid, unit, bhDataSetId } = file;
      if (!previewWay) {
        this.defaultViewFile(url);
        return;
      }
      let domain = location.origin;
      switch (previewWay) {
        //cad预览
        case "cad":
          window.open(
            `${domain}/#/blackHole/previewCad?uuid=${uuid}&fileName=${fileName}&unit=${unit}`
          );
          return;
        // 模型预览
        case "model":
          bhDataSetId &&
            window.open(
              `${domain}/#/blackHole/viewDataSetSingleSimple?dataSetId=${bhDataSetId}&name=${fileName}`
            );
          return;
        // 普通文件预览
        case "kkview":
          this.defaultViewFile(url);
          return;
        default:
          break;
      }
    },

    defaultViewFile(url) {
      this.previewModal.loading = true;
      this.$refs.previewModal.type = "file";
      this.$refs.previewModal.fileUrl =
        this.kkFileView +
        "/onlinePreview?url=" +
        encodeURIComponent(Base64.encode(url)) +
        "&watermarkTxt=" +
        //水印内容
        encodeURIComponent("") +
        "&token=" +
        getToken();
      this.previewModal.visible = true;
      this.previewModal.loading = false;
    },

    //下载
    downloadFile(row) {
      let { url } = row;
      if (!url) {
        this.$message.success("文件不存在", 1.5);
        return;
      }
      downloadDfs(url);
    },

    //关闭
    closeModal() {
      this.$emit("update:visible", false);
    },

    //文件icon
    filterIcon(item) {
      let { fileName } = this.replaceFields;
      let lastIdx = item[fileName].lastIndexOf(".");
      let fileType = "." + item[fileName].substring(lastIdx + 1);
      if (fileType) fileType = fileType.toLowerCase();
      switch (fileType) {
        case ".pdf":
          return "pdf";
        case ".doc":
        case ".docx":
          return "doc";
        case ".xls":
        case ".xlsx":
          return "xls";
        case ".ppt":
        case ".pptx":
        case ".pps":
          return "ppt";
        case ".png":
        case ".jpg":
        case ".jpeg":
        case ".bmp":
        case ".gif":
          return "image";
        case ".txt":
          return "txt";
        case ".zip":
        case ".rar":
          return "zip";
        case ".mp3":
        case ".wav":
        case ".wmv":
          return "music";
        case ".mp4":
        case ".m2v":
        case ".mkv":
          return "video";
        default:
          return "annex";
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.file-preview-container {
  .ant-modal-body {
    padding: 0 !important;
    .curve-modal-body {
      box-sizing: border-box;
      padding: 14px 0 14px 14px;
      height: 620px;
      display: flex;
      overflow: hidden;
      .sub-title {
        text-align: right;
        min-width: 80px;
        font-size: 14px;
        color: #666666;
      }
      .files-warp {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .batch-button {
          flex-grow: 0;
          margin-bottom: 10px;
        }
        .file-list {
          overflow-y: auto;
          overflow-x: hidden;
          flex: 1;
          padding-right: 14px;
          box-sizing: border-box;
          .file-item {
            margin-bottom: 8px;
            height: 32px;
            box-sizing: border-box;
            padding: 0 10px;
            background: #f2f2f2;
            border-radius: 4px 4px 4px 4px;
            display: flex;
            align-items: center;
            overflow: hidden;
            .file-icon {
              width: 20px;
              height: 20px;
              margin-right: 6px;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-shrink: 0;

              &.pdf {
                background: url("~@/assets/img/fileIcon/pdf.png");
                background-size: 100% 100%;
              }
              &.doc {
                background: url("~@/assets/img/fileIcon/doc.png");
                background-size: 100% 100%;
              }
              &.xls {
                background: url("~@/assets/img/fileIcon/xls.png");
                background-size: 100% 100%;
              }
              &.ppt {
                background: url("~@/assets/img/fileIcon/ppt.png");
                background-size: 100% 100%;
              }
              &.image {
                background: url("~@/assets/img/fileIcon/image.png");
                background-size: 100% 100%;
              }
              &.txt {
                background: url("~@/assets/img/fileIcon/txt.png");
                background-size: 100% 100%;
              }
              &.zip {
                background: url("~@/assets/img/fileIcon/zip.png");
                background-size: 100% 100%;
              }
              &.music {
                background: url("~@/assets/img/fileIcon/music.png");
                background-size: 100% 100%;
              }
              &.video {
                background: url("~@/assets/img/fileIcon/video.png");
                background-size: 100% 100%;
              }
              &.annex {
                background: url("~@/assets/img/fileIcon/annex.png");
                background-size: 100% 100%;
              }
            }
            .file-content {
              flex: 1;
              display: flex;
              overflow: hidden;
              padding-right: 20px;
              font-size: 14px;
              font-family: Microsoft YaHe;
              font-weight: 400;
              .file-name {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                flex: 1;
                color: #000000;
              }
              .file-size {
                flex-shrink: 0;
                margin-left: 10px;
                color: #bfbfbf;
              }
            }
            .file-operate {
              flex-shrink: 0;
              display: flex;
              .file-button {
                width: 14px;
                height: 14px;
                cursor: pointer;
                border-radius: 50%;
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 10px;
                &:last-of-type {
                  margin-right: 0;
                }
                .anticon {
                  transform: scale(0.8);
                }
                &.download-button {
                  background: none;
                  border-radius: 0;
                  .anticon {
                    color: @primary-color !important;
                    transform: scale(1);
                  }
                }
                &.preview-button {
                  background: url("~@/assets/img/fileIcon/preview.png");
                  background-size: 100% 100%;
                  top: 8px;
                  right: 40px;
                }
              }
            }
          }
        }
      }
      .ant-empty {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
</style>
